'use client';

import { queryMessage } from '@/services/api';
import { useQuery } from '@tanstack/react-query';
import type { IMessage } from '@/interfaces';
import Alert from '@/app/[locale]/alert/alert';
import AlertLoad from '@/app/[locale]/alert/load';
import { formatDate } from '@/lib/tool';
import { MESSAGE_RANGE_KEY, MESSAGE_TYPE_KEY } from '@/lib/constant';

export default function QueryMessageInfo({ details }: { details: IMessage }) {
  const querySectionDetailsByIdQuery = useQuery(
    ['/messages', details.id],
    async (context) => {
      return (await queryMessage({
        id: context.queryKey[1] + '',
      })) as IMessage;
    },
  );

  if (querySectionDetailsByIdQuery.data) {
    return (
      <div className="row">
        <div className="col">
          <div className="card">
            <div className="card-header bg-transparent text-muted">
              <i className="bi bi-info-square me-2"></i>
              {details.name}
            </div>
            <div className="card-body">
              <div className="table-responsive">
                <table className="table table-hover align-middle table-striped">
                  <thead>
                    <tr className="text-nowrap">
                      <th scope="col" className="fw-normal">
                        ID
                      </th>
                      <th scope="col" className="fw-normal">
                        {details.id}
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {Object.keys(details)
                      .filter((item) => !['id', 'content'].includes(item))
                      .map((item) => {
                        return (
                          <tr key={item} className="text-nowrap">
                            <td>
                              {item === 'createdBy' && '创建用户'}

                              {item === 'updatedBy' && '更新用户'}

                              {item === 'creatorAlias' && '创建者别名'}

                              {item === 'updaterAlias' && '更新者别名'}

                              {item === 'createdOn' && '创建时间'}

                              {item === 'updatedOn' && '更新时间'}

                              {item === 'deleted' && '是否删除'}

                              {item === 'name' && '消息名称'}

                              {item === 'overview' && '消息概述'}

                              {item === 'messageType' && '消息类型'}

                              {item === 'messageRange' && '消息范围'}

                              {item === 'businessId' && '业务 Id'}

                              {item === 'businessName' && '业务名称'}

                              {item === 'businessRemark' && '业务备注'}

                              {item === 'sender' && '发送者'}

                              {item === 'receiver' && '接收者'}

                              {item === 'senderAlias' && '发送者别名'}

                              {item === 'receiverAlias' && '接收者别名'}
                            </td>
                            <td>
                              {item === 'createdBy' && details[item]}

                              {item === 'updatedBy' && details[item]}

                              {item === 'creatorAlias' && details[item]}

                              {item === 'updaterAlias' && details[item]}

                              {item === 'createdOn' &&
                                formatDate(details[item])}

                              {item === 'updatedOn' &&
                                formatDate(details[item])}

                              {item === 'deleted' && details[item] + ''}

                              {item === 'name' && details[item]}

                              {item === 'overview' && details[item]}

                              {item === 'messageType' &&
                                MESSAGE_TYPE_KEY[details[item]]}

                              {item === 'messageRange' &&
                                MESSAGE_RANGE_KEY[details[item]]}

                              {item === 'businessId' && details[item]}

                              {item === 'businessName' && details[item]}

                              {item === 'businessRemark' && details[item]}

                              {item === 'sender' && details[item]}

                              {item === 'receiver' && details[item]}

                              {item === 'senderAlias' && details[item]}

                              {item === 'receiverAlias' && details[item]}
                            </td>
                          </tr>
                        );
                      })}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (querySectionDetailsByIdQuery.error) {
    return <Alert type="error" message={querySectionDetailsByIdQuery.error} />;
  }

  return <AlertLoad />;
}
